<template>
  <div class="form-view-row base-address-view">
    <label>{{field.displayName}}</label>
    <div class="form-view-row-content" @click="openMap">
      <i v-if="displayMap" class="iconfont icon-address"></i>
      <base-address-switch v-model="value"/>
    </div>
  </div>
</template>

<script>

export default {
  name: 'form-address-view',
  props: {
    field: {
      type: Object,
      default: () => ({})
    },
    value: Object
  },
  data(){
    return {
    }
  },
  
  computed: {
    displayMap(){
      let value = this.value;
      if (!value) return false;
      return ![value.adProvince, value.adCity, value.adDist,value.adStreet, value.adAddress, value.province, value.city, value.dist, value.address,value.adStreet].every(s => !s)
    }
  },
  methods: {
    openMap() {
      this.$fast.map
        .display(this.value, {title: this.field.displayName})
        .catch(err => console.error('openMap catch an err: ', err));
    }
  }
}
</script>

<style lang="scss">
.base-address-view{
  i.iconfont {
    @include fontColor();
    cursor: pointer;
    font-size: 14px;
  }
  .form-view-row-content{
    cursor: pointer;
  }
  .form-view-row-content:hover{
    color:$color-primary-light-6
  }
}
</style>
